<template>
  <div>
    <div class="app-container">
      <el-row style="padding-left: 80px" justify="space-between">
        <el-steps :active="active" align-center>
          <el-step title="基本信息" style="width: 200px" />
          <el-step title="组委会信息" style="width: 200px" />
          <el-step title="赛事基础设置" style="width: 200px" />
          <el-step title="赛事报名信息" style="width: 200px" />
        </el-steps>
      </el-row>
      <br />
      <el-card>
        <br />
        <br />
        <!--基本信息-->
        <LeagueListAdd
          v-if="active == 0"
          @nextStep="nextStep"
          :id="id"
          :leagueId="leagueId"
        ></LeagueListAdd>
        <!--组委会信息-->
        <LeagueListOc
          v-if="active == 1"
          @nextStep="nextStep"
          :id="id"
          :leagueId="leagueId"
        ></LeagueListOc>
        <!--赛事基础设置-->
        <LeagueListBaseInfo
          v-if="active == 2"
          @nextStep="nextStep"
          :id="id"
          :leagueId="leagueId"
        ></LeagueListBaseInfo>
        <!--赛事报名信息-->
        <LeagueListSignInfo
          v-if="active == 3"
          @nextStep="nextStep"
          :id="id"
          :leagueId="leagueId"
        ></LeagueListSignInfo>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import LeagueListAdd from "@/views/match/list/mathAdd/baseInfo";
import LeagueListOc from "@/views/match/list/mathAdd/organizing";
import LeagueListBaseInfo from "@/views/match/list/mathAdd/baseConfig";
import LeagueListSignInfo from "@/views/match/list/mathAdd/setSignForm";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const active = ref(0);
const id = ref(route.query.id);
const leagueId = ref(route.query.leagueId);

// 下一步
function nextStep(val, idx) {
  active.value = val;
  id.value = idx;
}
</script>

<style scope></style>
